<template>
  <div class="systemUser">
    <!-- 顶部搜索栏 -->
    <div class="screenContent">
      <div class="screenNav">
        <div class="scrTop">
          <div class="labItem" style="flex: 2">
            <div class="label">关键字：</div>
            <div class="labScach">
              <input v-model="inputResult" placeholder="请输入名字或手机号进行搜索" />
              <search class="searchIcon" theme="outline" size="20" fill="#999" />
            </div>
          </div>
          <div class="labItem sel">
            <div class="label">角色：</div>
            <div class="labSelect">
              <el-select v-model="roleId" class="m-2" placeholder="全部" size="large">
                <el-option label="全部" value=""></el-option>
                <el-option v-for="(item, index) in roleList" :key="index" :label="item.name" :value="item.id"> </el-option>
              </el-select>
            </div>
          </div>
          <div class="labItem sel">
            <div class="label">类型：</div>
            <div class="labSelect">
              <el-select v-model="userType" class="m-2" placeholder="全部" size="large">
                <el-option label="全部" value=""></el-option>
                <el-option v-for="(item, index) in userTypeList" :key="index" :label="item.name" :value="item.id"> </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="scrBot">
          <div class="btn success" @click="userAccountShowMethod">
            <span>添加</span>
            <people-plus class="btnIcon" theme="outline" size="20" fill="#fff" />
          </div>
          <div class="left">
            <div class="btn info" @click="findDtUsers">查询</div>
            <div class="btn default" @click="reset">重置</div>
          </div>
        </div>
      </div>
      <div class="censusNav">
        <div class="censusTit">
          <div class="censusTip">用户人数</div>
          <span class="loginRecord" @click="findDtUsersLoginLog"> 登录日志 </span>
        </div>
        <div class="censusCount">
          <div class="censusItem">
            <div class="num">
              <img src="https://qsb-resource.oss-cn-shanghai.aliyuncs.com/userpop1.png" alt="" />
              <span>{{ personList.normalSize }}</span>
            </div>
            <p>正常</p>
          </div>
          <div class="censusItem">
            <div class="num">
              <img src="https://qsb-resource.oss-cn-shanghai.aliyuncs.com/userpop2.png" alt="" />
              <span>{{ personList.disabledSize }}</span>
            </div>
            <p>禁用</p>
          </div>
          <div class="censusItem">
            <div class="num">
              <img src="https://qsb-resource.oss-cn-shanghai.aliyuncs.com/userpop3.png" alt="" />
              <span>{{ personList.touristsSize }}</span>
            </div>
            <p>正常游客</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 表格 -->
    <div class="tableCont">
      <el-table :data="dtUsersList" :header-cell-style="{ color: '#999' }" :cell-style="{ color: '#35353F' }" style="width: 100%" v-loading="loadingFindDtUsers">
        <el-table-column label="序号" align="center" type="index" width="80">
          <template #default="scope">
            <span>{{ scope.$index + (page - 1) * limit + 1 }} </span>
          </template>
        </el-table-column>
        <el-table-column prop="username" align="center" label="名称" width="180" :show-overflow-tooltip="true" />
        <el-table-column prop="phone" align="center" label="账户" width="160" />
        <el-table-column prop="roleName" align="center" label="角色" width="160" :show-overflow-tooltip="true">
          <template #default="scope">
            <span v-if="scope.row.roleName == null">-</span>
            <span v-if="scope.row.roleName != null">
              {{ scope.row.roleName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="areaName" align="center" label="管辖范围" width="180" :show-overflow-tooltip="true">
          <template #default="scope">
            <span v-if="scope.row.areaName == null">-</span>
            <span v-if="scope.row.areaName != null">
              {{ scope.row.areaName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="isValid" align="center" label="状态" width="100">
          <template #default="scope">
            <span v-if="scope.row.isValid === 1"> 正常 </span>
            <span v-if="scope.row.isValid === 2" style="color: #f05e5e"> 禁用 </span>
            <span v-if="scope.row.isValid === 3" style="color: #f05e5e"> 过期 </span>
          </template>
        </el-table-column>
        <el-table-column prop="expireTime" align="center" label="期限">
          <template #default="scope">
            <span v-if="scope.row.expireTime == null">-</span>
            <span v-if="scope.row.expireTime != null">
              {{ scope.row.expireTime }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="lastLoginTimeNew" width="140" align="center" label="最近一次登录">
          <template #default="scope">
            <span v-if="scope.row.lastLoginTimeNew == null">-</span>
            <span v-if="scope.row.lastLoginTimeNew != null">
              {{ scope.row.lastLoginTimeNew }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="280">
          <template #default="scope">
            <span style="cursor: pointer" class="spanBtn color1" v-if="scope.row.wxOpenId == null" @click="dianjiQrCode(scope.row.id)">微信绑定</span>
            <span style="cursor: pointer" class="spanBtn color2" v-if="scope.row.wxOpenId != null" @click="unbindWeChat(scope.row.id)">微信解绑</span>
            <span style="cursor: pointer" class="spanBtn color1" @click="findUpdateComtent(scope.row.id)">编辑</span>
            <span style="cursor: pointer" v-if="scope.row.isValid == 1" class="spanBtn color2" @click="delOrDisDtUsers(scope.row.id, 2)">禁用</span>
            <span style="cursor: pointer; color: #3f9005" v-if="scope.row.isValid == 2" class="spanBtn" @click="delOrDisDtUsers(scope.row.id, 1)">启用</span>
            <span v-if="scope.row.isValid == 3" class="hide"></span>
            <!-- <span v-else class="yinchang"></span> -->
            <span style="cursor: pointer" class="spanBtn color3" @click="updateDialogMehtod(scope.row.id, scope.row.phone)">重置密码</span>
            <span style="cursor: pointer" class="spanBtn color3" @click="delOrDisDtUsers(scope.row.id, 0)">删除</span>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <!-- 分页 -->
        <el-pagination background layout="total, prev, pager, next, jumper" :total="total" :page-size="limit" @current-change="findDtUsers" :current-page="page"> </el-pagination>
      </div>
    </div>

    <!-- 绑定微信二维码窗口 -->
    <el-dialog :close-on-click-modal="false" v-model="QRcodeDialogVisible" :show-close="false" width="250px" align="center">
      <template #header="{ close, titleId, titleClass }">
        <div class="myDialogHeader">
          <span :id="titleId" :class="titleClass">绑定微信二维码</span>
          <div class="close">
            <close @click="close" theme="outline" size="20" fill="#666" />
          </div>
        </div>
      </template>
      <div class="loginQrcode" v-loading="loading">
        <qrcode-vue :value="qrCodeUrl" :size="200" level="H"></qrcode-vue>
      </div>
    </el-dialog>

    <!-- 登录日志窗口 -->
    <el-dialog :close-on-click-modal="false" v-model="loginLogShow" :show-close="false">
      <template #header="{ close, titleId, titleClass }">
        <div class="myDialogHeader">
          <span :id="titleId" :class="titleClass">登录日志</span>
          <div class="close">
            <close @click="close" theme="outline" size="20" fill="#666" />
          </div>
        </div>
      </template>
      <div class="loginDialog" v-loading="loading">
        <el-table height="55vh" :header-cell-style="{ color: '#999' }" :cell-style="{ color: '#35353F' }" :data="loginLogList">
          <el-table-column property="username" label="名称" width="110" />
          <el-table-column property="phone" label="账户" width="150" />
          <el-table-column property="ip" label="登录IP" />
          <el-table-column property="loginType" label="登录方式" />
          <el-table-column property="loginTime" label="登录时间" />
        </el-table>
        <div class="tabTips">*默认显示最近20条记录</div>
      </div>
    </el-dialog>

    <!-- 添加用户账号窗口 -->
    <el-dialog :close-on-click-modal="false" v-model="userAccountShow" width="560px" :show-close="false" @close=";(value1 = []), (imageList = []), (roleIdArr = '')">
      <template #header="{ close, titleId, titleClass }">
        <div class="myDialogHeader">
          <span :id="titleId" :class="titleClass">添加用户</span>
          <div class="close">
            <close @click="close" theme="outline" size="20" fill="#666" />
          </div>
        </div>
      </template>
      <div class="fromLabel loginDialog" v-loading="loading">
        <div class="labelItem">
          <div class="term">
            <div class="label">头像</div>
            <div class="labelHead">
              <div class="sexHead">
                <div class="sexImg" @click="setHeader(1)" :class="{ isActive: sexHeadIndex == 1 }">
                  <img ref="imgManRef" src="http://bgkf.oss-cn-hangzhou.aliyuncs.com/20231211/SZ_IV-1702286496690576.png" alt="" />
                </div>
                <p>头像1</p>
              </div>
              <div class="sexHead">
                <div class="sexImg" @click="setHeader(2)" :class="{ isActive: sexHeadIndex == 2 }">
                  <img ref="imgWoManRef" src="http://bgkf.oss-cn-hangzhou.aliyuncs.com/20231224/SZ_IV-1703399011436984.jpg" alt="" />
                </div>
                <p>头像2</p>
              </div>
              <div class="sexHead" v-if="imageList.length && imageList.length > 0">
                <div class="addImg" @click="setHeader(3)" :class="{ isActive: sexHeadIndex == 3 }">
                  <!-- 上传后文件图片展示 -->
                  <img :src="imageList[0] || ''" alt="" />
                </div>
                <p>自定义</p>
              </div>
              <div class="sexHead">
                <div class="addImg">
                  <el-upload
                    class="uploadDemo"
                    :file-list="fileList"
                    action="#"
                    multiple
                    :limit="1"
                    :show-file-list="false"
                    :http-request="() => {}"
                    :on-change="addAllChangeImg"
                    value-format="timestamp"
                    accept=".jpg,.png,JPG,PNG"
                    :auto-upload="false"
                  >
                    <template #trigger>
                      <img src="https://qsb-resource.oss-cn-shanghai.aliyuncs.com/icon3.png" alt="" />
                    </template>
                  </el-upload>
                </div>
                <p>{{ imageList.length > 0 ? '重新上传' : '自定义' }}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="labelItem">
          <div class="term">
            <div class="label">名称</div>
            <div>
              <el-input size="large" v-model="addRoleList.username" placeholder="请输入账号名称" clearable />
            </div>
          </div>
        </div>
        <div class="labelItem">
          <div class="term">
            <div class="label">账户</div>
            <div>
              <el-input size="large" @keyup.enter="search1" @input="search1($event)" v-model="addRoleList.phone" placeholder="请输入账号手机号" clearable />
            </div>
          </div>
          <div class="term">
            <div class="label">密码</div>
            <div>
              <el-input size="large" v-model="addRoleList.password" type="password" placeholder="密码长度为1-20位，区分大小写" show-password />
            </div>
          </div>
        </div>
        <div class="labelItem">
          <div class="term">
            <div class="label">类型</div>
            <div>
              <el-cascader style="width: 100%" size="large" v-model="value" :options="userTypeOptions" @change="handleChange(value)" />
            </div>
          </div>
          <div class="term">
            <div class="label">角色</div>
            <div>
              <el-select v-model="roleIdArr" class="m-2" placeholder="选择角色" size="large">
                <el-option v-for="(item, index) in roleList" :key="index" :label="item.name" :value="item.id" />
              </el-select>
            </div>
          </div>
        </div>
        <div class="labelItem">
          <div class="term">
            <div class="label">管辖范围</div>
            <div>
              <el-cascader ref="cascaderRef" style="width: 100%" size="large" :props="props" v-model="value1" :options="areaOptions" @change="handleChange1" />
            </div>
          </div>
        </div>

        <div class="labelBtn">
          <div class="btn default" @click="userAccountShow = !userAccountShow">取消</div>
          <div class="btn info" @click="addDtUsers">确定</div>
        </div>
      </div>
    </el-dialog>

    <!-- 重置密码窗口 -->
    <el-dialog :close-on-click-modal="false" v-model="updateDialog" width="560px" :show-close="false">
      <template #header="{ close, titleId, titleClass }">
        <div class="myDialogHeader">
          <span :id="titleId" :class="titleClass">重置密码</span>
          <div class="close">
            <close @click="close" theme="outline" size="20" fill="#666" />
          </div>
        </div>
      </template>
      <div class="loginDialog" v-loading="updatePasswordLoading">
        <div class="labelItem">
          <div class="term">
            <div class="label" style="font-size: 16px; margin-bottom: 5px">新密码</div>
            <div>
              <el-input size="large" v-model="newPassword" placeholder="请输入密码" clearable />
            </div>
          </div>
        </div>
        <div class="labelBtn">
          <div class="btn default" @click="updateDialog = !updateDialog">取消</div>
          <div class="btn info" @click="updatePassword">确定</div>
        </div>
      </div>
    </el-dialog>

    <!-- 修改用户账号窗口 -->
    <el-dialog :close-on-click-modal="false" v-model="updateDtUsersDialog" width="560px" :show-close="false" @close=";(value3 = []), (imageList1 = []), (roleIdArr2 = '')">
      <template #header="{ close, titleId, titleClass }">
        <div class="myDialogHeader">
          <span :id="titleId" :class="titleClass">编辑用户</span>
          <div class="close">
            <close @click="close" theme="outline" size="20" fill="#666" />
          </div>
        </div>
      </template>
      <div class="fromLabel loginDialog" v-loading="updateLodaing">
        <div class="labelItem">
          <div class="term">
            <div class="label">头像</div>
            <div class="labelHead">
              <div class="sexHead">
                <div class="sexImg" @click="setHeader1(1)" :class="{ isActive: sexHeadIndex == 1 }">
                  <img ref="imgManRef1" src="http://bgkf.oss-cn-hangzhou.aliyuncs.com/20231211/SZ_IV-1702286496690576.png" alt="" />
                </div>
                <p>头像1</p>
              </div>
              <div class="sexHead">
                <div class="sexImg" @click="setHeader1(2)" :class="{ isActive: sexHeadIndex == 2 }">
                  <img ref="imgWoManRef1" src="http://bgkf.oss-cn-hangzhou.aliyuncs.com/20231224/SZ_IV-1703399011436984.jpg" alt="" />
                </div>
                <p>头像2</p>
              </div>
              <div class="sexHead" v-if="imageList1.length && imageList1.length > 0">
                <div class="addImg" @click="setHeader1(3)" :class="{ isActive: sexHeadIndex == 3 }">
                  <!-- 上传后文件图片展示 -->
                  <img :src="imageList1[0] || ''" alt="" />
                </div>
                <p>自定义</p>
              </div>
              <div class="sexHead">
                <div class="addImg">
                  <el-upload
                    class="uploadDemo"
                    :file-list="fileList1"
                    action="#"
                    multiple
                    :limit="1"
                    :show-file-list="false"
                    :http-request="() => {}"
                    :on-change="addAllChangeImg1"
                    value-format="timestamp"
                    accept=".jpg,.png,JPG,PNG"
                    :auto-upload="false"
                  >
                    <template #trigger>
                      <img src="https://qsb-resource.oss-cn-shanghai.aliyuncs.com/icon3.png" alt="" />
                    </template>
                  </el-upload>
                </div>
                <p>{{ imageList1.length > 0 ? '重新上传' : '自定义' }}</p>
              </div>
              <!-- <div class="sexHead">
                <div class="addImg" @click="setHeader1(3)" :class="{ isActive: sexHeadIndex == 3 }">
                  <el-upload class="uploadDemo" :file-list="fileList" action="#" multiple :limit="1"
                    :show-file-list="false" :http-request="() => { }" :on-change="addAllChangeImg1"
                    value-format="timestamp" accept=".jpg,.png,JPG,PNG" :auto-upload="false">
                    <template v-if="!(imageList1 && imageList1.length)" #trigger>
                      <img src="https://qsb-resource.oss-cn-shanghai.aliyuncs.com/icon3.png" alt="" />
                    </template>
                  </el-upload>
                  上传后文件图片展示
                  <img v-if="imageList1.length && imageList1.length > 0" :src="imageList1[0] || ''" alt="" />
                </div>
                <p>自定义</p>
              </div> -->
            </div>
          </div>
        </div>
        <div class="labelItem">
          <div class="term">
            <div class="label">名称</div>
            <div>
              <el-input size="large" v-model="findDtUsersByIdList.username" placeholder="请输入账号名称" clearable />
            </div>
          </div>
        </div>
        <div class="labelItem">
          <div class="term">
            <div class="label">账户</div>
            <div>
              <el-input size="large" v-model="findDtUsersByIdList.phone" placeholder="请输入账号手机号" clearable />
            </div>
          </div>
          <div class="term">
            <div class="label">密码</div>
            <div>
              <el-input size="large" disabled v-model="findDtUsersByIdList.password" type="password" placeholder="此处无法重置密码" show-password />
            </div>
          </div>
        </div>
        <div class="labelItem">
          <div class="term">
            <div class="label">类型</div>
            <div>
              <el-cascader style="width: 100%" size="large" v-model="value2" :options="userTypeOptions" @change="handleChange2(value2)" />
              <p v-if="findDtUsersByIdList.usertype == 0" style="color: #8d8d8d; font-size: 12px">过期时间为:{{ findDtUsersByIdList.expireTime }}</p>
            </div>
          </div>
          <div class="term">
            <div class="label">角色</div>
            <div>
              <el-select v-model="roleIdArr2" class="m-2" placeholder="选择角色" size="large">
                <el-option v-for="(item, index) in roleList" :key="index" :label="item.name" :value="item.id" />
              </el-select>
            </div>
          </div>
        </div>
        <div class="labelItem">
          <div class="term">
            <div class="label">管辖范围</div>
            <div>
              <el-cascader ref="cascaderRef" style="width: 100%" size="large" :props="props" v-model="value3" :options="areaOptions" @change="handleChange12" />
            </div>
          </div>
        </div>

        <div class="labelBtn">
          <div class="btn default" @click="updateDtUsersDialog = !updateDtUsersDialog">取消</div>
          <div class="btn info" @click="updateDtUsers">确定</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import QrcodeVue from 'qrcode.vue'
export default {
  name: "systemSettingsUser",
  components: {
    QrcodeVue,
  },
  name: 'search1',
  data() {
    let self = this
    return {
      props: {
        multiple: true,
        // lazy: true,
        // lazyLoad(node, resolve) {
        //   self.findThreeClassifyById(node.data.value, resolve)
        // }
      },
      newPassword: '',
      addRoleList: {
        username: '',
        password: '',
        avatar: 'https://qsb-resource.oss-cn-shanghai.aliyuncs.com/icon1.png',
        phone: '',
        userType: 1,
        roleId: '',
        manageAreaId: '',
      },
      state: '正常',
      total: 0,
      page: 1,
      limit: 10,
      loading: false,
      loginLogShow: false,
      userAccountShow: false,
      updateDialog: false,
      updateLodaing: false,
      updateDtUsersDialog: false,
      QRcodeDialogVisible: false,
      input1: '',
      input: '',
      value: '1',
      value2: '',
      value1: [],
      value3: [],
      roleIdArr: '',
      roleIdArr2: '',
      dtUsersList: [],
      personList: {},
      loginLogList: [],
      roleList: [],
      userTypeList: [],
      sexHeadIndex: 1,
      fileList: [],
      fileList1: [],
      imageList: [],
      imageList1: [],
      secondaryParentList: [],
      findDtUsersByIdList: [],
      roleIdArray: [],
      inputResult: '',
      roleId: '',
      userType: '',
      areaId: '',
      timeOut: {},
      loadingFindDtUsers: false,
      updatePasswordLoading: false,
      areaOptions: [
        // {
        //   value: '2',
        //   label: '艾溪湖管理处',
        //   children: [],
        // },
        {
          value: '3',
          label: '行政村',
          children: [],
        },
        {
          value: '16',
          label: '社区',
          children: [],
        },
        {
          value: '2',
          label: '城镇',
          children: [],
        },
        {
          value: '4',
          label: '居委会',
          children: [],
        },
      ],
      userTypeOptions: [
        {
          value: '1',
          label: '正常',
        },
        {
          value: '0',
          label: '游客',
          children: [
            {
              value: 'hour',
              label: '过期时间(时)',
              children: [
                {
                  value: '2',
                  label: '1时',
                },
                {
                  value: '3',
                  label: '2时',
                },
                {
                  value: '4',
                  label: '3时',
                },
                {
                  value: '5',
                  label: '6时',
                },
                {
                  value: '6',
                  label: '12时',
                },
              ],
            },
            {
              value: 'day',
              label: '过期时间(天)',
              children: [
                {
                  value: '7',
                  label: '1天',
                },
                {
                  value: '8',
                  label: '3天',
                },
                {
                  value: '9',
                  label: '5天',
                },
                {
                  value: '10',
                  label: '7天',
                },
                {
                  value: '11',
                  label: '15天',
                },
              ],
            },
          ],
        },
      ],
    }
  },
  mounted() {
    this.findDtUsers()
    this.findSize()
    this.findAllAuthGroupTitle()
    this.findUsertype()
    this.areaOptions.forEach((item, index) => {
      this.findThreeClassifyById(item.value, index)
    })
    //  this.findSecondaryParent();
  },
  methods: {
    //点击打开dialog组件并且生成二维码
    dianjiQrCode(id) {
      this.QRcodeDialogVisible = true
      this.GetQRcode(id)
    },
    //  生成二维码
    GetQRcode(id) {
      let url = 'http%3A%2F%2Faxh.dfr.cool%2Fbind%2Fwx'
      let src =
        'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx025fe1541980faae&redirect_uri=' +
        url +
        '&response_type=code&scope=snsapi_userinfo&state=' +
        id +
        '&connect_redirect=1#wechat_redirect'
      this.qrCodeUrl = src
    },
    //微信解除绑定
    unbindWeChat(id) {
      this.$confirm('解除绑定微信, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.loadingFindDtUsers = true
        this.$http
          .post('/axh/dtUsers/unbindWeChat', {
            id: id,
          })
          .then((data) => {
            this.$message({
              type: 'success',
              message: data.msg,
            })
            this.loadingFindDtUsers = false
            this.findDtUsers(this.page)
          })
      })
    },
    userAccountShowMethod() {
      this.sexHeadIndex = 1
      this.userAccountShow = true
      this.findAllAuthGroupTitle()
      this.areaOptions.forEach((item, index) => {
        this.findThreeClassifyById(item.value, index)
      })
    },
    search1(event) {
      this.addRoleList.password = event.toString().slice(5, 11)
    },
    // 上传添加图片到文件列表
    addAllChangeImg(e) {
      this.uploadImage(e.raw).then((res) => {
        this.sexHeadIndex = 3
        if (this.imageList.length < 0) {
          this.imageList.push(res.result)
          this.addRoleList.avatar = this.imageList[0]
        } else {
          this.imageList[0] = res.result
          this.addRoleList.avatar = this.imageList[0]
        }
      })
    },
    addAllChangeImg1(e) {
      this.uploadImage(e.raw).then((res) => {
        this.sexHeadIndex = 3
        if (this.imageList1.length < 0) {
          this.imageList1.push(res.result)
          this.findDtUsersByIdList.avatar = this.imageList1[0]
        } else {
          this.imageList1[0] = res.result
          this.findDtUsersByIdList.avatar = this.imageList1[0]
        }
      })
    },
    bindingWX() {
      this.$confirm('请确认操作，是否进行微信绑定?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$message({
          type: 'warning',
          message: '功能正在完善中！',
        })
      })
    },
    findUpdateComtent(id) {
      this.updateDtUsersDialog = true
      this.findDtUsersById(id)
    },
    //修改时的回显
    findDtUsersById(id) {
      this.findAllAuthGroupTitle()
      this.areaOptions.forEach((item, index) => {
        this.findThreeClassifyById(item.value, index)
      })
      this.$http
        .post('/axh/dtUsers/findDtUsersById', {
          id: id,
        })
        .then((res) => {
          this.findDtUsersByIdList = res.result
          if (res.result.roleId) {
            // this.findDtUsersByIdList.roleId = res.result.roleId.split(',')
            // for (var i = 0; i < this.findDtUsersByIdList.roleId.length; i++) {
            //   this.findDtUsersByIdList.roleId[i] = parseInt(this.findDtUsersByIdList.roleId[i])
            // }
            this.roleIdArr2 = parseInt(this.findDtUsersByIdList.roleId)
          }

          this.findDtUsersByIdList.areaId = res.result.areaId.split(',')
          for (var i = 0; i < this.findDtUsersByIdList.areaId.length; i++) {
            this.findDtUsersByIdList.areaId[i] = parseInt(this.findDtUsersByIdList.areaId[i])
          }
          this.value3 = this.findDtUsersByIdList.areaId
          this.value2 = this.findDtUsersByIdList.usertype.toString()
          if (res.result.avatar == 'https://qsb-resource.oss-cn-shanghai.aliyuncs.com/icon1.png') {
            this.sexHeadIndex = 1
          } else if (res.result.avatar == 'https://qsb-resource.oss-cn-shanghai.aliyuncs.com/icon2.png') {
            this.sexHeadIndex = 2
          } else {
            this.sexHeadIndex = 3
            this.imageList1[0] = res.result.avatar
          }
        })
    },
    //编辑用户信息
    updateDtUsers() {
      this.updateLodaing = true
      this.findDtUsersByIdList.roleId = this.roleIdArr2
      if (!this.findDtUsersByIdList.username || this.findDtUsersByIdList.username === ' ') {
        this.$message({
          type: 'error',
          message: '用户名称不能为空',
        })
        return
      }
      if (!this.findDtUsersByIdList.phone || this.findDtUsersByIdList.phone === ' ') {
        this.$message({
          type: 'error',
          message: '账户手机号不能为空',
        })
        return
      }

      if (!this.findDtUsersByIdList.roleId || this.findDtUsersByIdList.roleId === ' ') {
        this.$message({
          type: 'error',
          message: '角色不能为空',
        })
        return
      }
      this.findDtUsersByIdList.areaId = this.value3.join(',')
      if (!this.findDtUsersByIdList.areaId || this.findDtUsersByIdList.areaId === ' ') {
        this.$message({
          type: 'error',
          message: '管辖范围不能为空',
        })
        return
      }
      if (!this.findDtUsersByIdList.avatar || this.findDtUsersByIdList.avatar === ' ') {
        this.$message({
          type: 'error',
          message: '用户头像不能为空',
        })
        return
      }
      this.$http
        .post('/axh/dtUsers/updateDtUsers', {
          username: this.findDtUsersByIdList.username,
          avatar: this.findDtUsersByIdList.avatar,
          phone: this.findDtUsersByIdList.phone,
          id: this.findDtUsersByIdList.id,
          userType: this.findDtUsersByIdList.usertype,
          roleId: this.findDtUsersByIdList.roleId,
          manageAreaId: this.findDtUsersByIdList.areaId,
        })
        .then((res) => {
          this.updateLodaing = false
          this.$message({
            type: 'success',
            message: res.msg,
          })

          this.updateDtUsersDialog = false
          this.findDtUsers(this.page)
          this.findSize()
        })
    },
    lazyLoadManageAdd(node, resolve) {},
    updateDialogMehtod(id, phone) {
      this.updateDialog = true
      this.newPassword = phone.toString().slice(5, 11)
      this.id = id
    },
    handleChange(value) {
      if (value[0] == 1) {
        this.addRoleList.userType = value[0]
      } else {
        this.addRoleList.userType = value[2]
      }
    },
    handleChange2(value) {
      if (value[0] == 1) {
        this.findDtUsersByIdList.usertype = value[0]
      } else {
        this.findDtUsersByIdList.usertype = value[2]
      }
    },
    handleChange1() {
      let nodes = this.$refs.cascaderRef.getCheckedNodes(true)

      const ids = []

      nodes.forEach((item) => {
        ids.push(item.data.value)
      })
      this.addRoleList.manageAreaId = ids.join(',')
    },
    handleChange12() {
      let nodes = this.$refs.cascaderRef.getCheckedNodes(true)

      const ids = []

      nodes.forEach((item) => {
        ids.push(item.data.value)
      })
    },

    setHeader(index) {
      // 如果是3特殊处理
      if (index == 3 && this.imageList && this.imageList.length > 0) {
        this.sexHeadIndex = index
        this.addRoleList.avatar = this.imageList[0]
      } else {
        this.sexHeadIndex = index
        if (index == 1) {
          this.addRoleList.avatar = this.$refs.imgManRef.src
        } else if (index == 2) {
          this.addRoleList.avatar = this.$refs.imgWoManRef.src
        }
      }
    },
    setHeader1(index) {
      // 如果是3特殊处理
      if (index == 3 && this.imageList1 && this.imageList1.length > 0) {
        this.sexHeadIndex = index
        this.findDtUsersByIdList.avatar = this.imageList1[0]
      } else {
        this.sexHeadIndex = index
        if (index == 1) {
          this.findDtUsersByIdList.avatar = this.$refs.imgManRef1.src
        } else if (index == 2) {
          this.findDtUsersByIdList.avatar = this.$refs.imgWoManRef1.src
        }
      }
    },
    //重置方法
    reset() {
      this.inputResult = ''
      this.roleId = ''
      this.userType = ''
    },
    //获取用户信息
    findDtUsers(page = 1) {
      this.loadingFindDtUsers = true
      if (page && page > 0) {
        this.page = parseInt(page)
      }
      this.$http
        .post('/axh/dtUsers/findDtUsers', {
          page: this.page,
          limit: this.limit,
          inputResult: this.inputResult,
          roleId: this.roleId,
          userType: this.userType,
        })
        .then((res) => {
          if (res) {
            this.dtUsersList = res.dtUsersList
            this.total = res.total
            if (this.timeOut != null) {
              clearTimeout(this.timeOut)
              this.timeOut = null
            }
            this.timeOut = setTimeout(() => {
              this.loadingFindDtUsers = false
            }, 20)
          }
        })
    },
    //获取三种类型的人数
    findSize() {
      this.$http.post('/axh/dtUsers/findSize', {}).then((res) => {
        this.personList = res.result
      })
    },
    //获取登录日志
    findDtUsersLoginLog() {
      this.loading = true
      this.loginLogShow = true
      this.$http
        .post('/axh/dtUsers/findDtUsersLoginLog', {
          page: 1,
          limit: 20,
        })
        .then((res) => {
          this.loginLogList = res.result
          this.loading = false
        })
    },
    //获取所有角色名以及id
    findAllAuthGroupTitle() {
      this.$http.post('/axh/dtAuthGroup/findAllAuthGroupTitle', {}).then((res) => {
        this.roleList = res.result
      })
    },
    //获取所有类型名以及id
    findUsertype() {
      this.$http.post('/axh/dtUsers/findUsertype', {}).then((res) => {
        this.userTypeList = res.result
      })
    },
    //查询所有二级父类
    findSecondaryParent() {
      this.$http.post('/axh/findBy/parent', {}).then((res) => {
        this.secondaryParentList = res.result
      })
    },
    //通过二级分类id查询三级分类
    findThreeClassifyById(id, index) {
      this.$http.post('/axh/dtClassify/findThreeClassifyById', { pidStr: id }).then((res) => {
        let pojo = []
        if (res.result) {
          res.result.forEach((item) => {
            pojo.push({
              value: item.id,
              label: item.name,
              leaf: true,
            })
          })
        }
        this.areaOptions[index].children = pojo
      })
    },
    //禁用或者删除后台用户
    delOrDisDtUsers(id, valid) {
      this.loading = true
      // valid = valid == 1 ? 0 : 1;
      let text = ''
      if (valid == 0) {
        text = '请确认操作，是否确定删除?'
      } else if (valid == 1) {
        text = '请确认操作，是否确定启用?'
      } else {
        text = '请确认操作，是否确定禁用?'
      }
      this.$confirm(text, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$http
            .post('/axh/dtUsers/delOrDisDtUsers', {
              isValid: valid,
              id: id,
            })
            .then((data) => {
              this.$message({
                type: 'success',
                message: data.msg,
              })
              this.loading = false
              this.findDtUsers(this.page)
              this.findSize()
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消操作',
          })
        })
    },
    //新增用户信息
    addDtUsers() {
      this.addRoleList.roleId = this.roleIdArr
      if (!this.addRoleList.username || this.addRoleList.username === ' ') {
        this.$message({
          type: 'error',
          message: '用户名称不能为空',
        })
        return
      }
      if (!this.addRoleList.phone || this.addRoleList.phone === ' ') {
        this.$message({
          type: 'error',
          message: '账户手机号不能为空',
        })
        return
      }
      if (!this.addRoleList.password || this.addRoleList.password === ' ') {
        this.$message({
          type: 'error',
          message: '密码不能为空',
        })
        return
      }
      if (!this.addRoleList.userType || this.addRoleList.userType === ' ') {
        this.$message({
          type: 'error',
          message: '类型不能为空',
        })
        return
      }

      if (!this.addRoleList.roleId || this.addRoleList.roleId === ' ') {
        this.$message({
          type: 'error',
          message: '角色不能为空',
        })
        return
      }
      if (!this.addRoleList.manageAreaId || this.addRoleList.manageAreaId === ' ') {
        this.$message({
          type: 'error',
          message: '管辖范围不能为空',
        })
        return
      }
      // this.loading = true
      this.$http
        .post('/axh/dtUsers/addDtUsers', {
          username: this.addRoleList.username,
          password: this.addRoleList.password,
          avatar: this.addRoleList.avatar,  
          phone: this.addRoleList.phone,
          userType: this.addRoleList.userType,
          roleId: this.addRoleList.roleId,
          manageAreaId: this.addRoleList.manageAreaId,
        })
        .then((res) => {
          this.loading = false
          this.$message({
            type: 'success',
            message: res.msg,
          })
          this.addRoleList = {}
          this.addRoleList.userType = 1
          this.value = '1'
          this.sexHeadIndex = 1
          this.addRoleList.avatar = 'https://qsb-resource.oss-cn-shanghai.aliyuncs.com/icon1.png'
          this.userAccountShow = false
          this.findDtUsers()
          this.findSize()
        }).catch((err)=>{
          this.loading = false
        })
    },
    //重置密码
    updatePassword() {
      this.updatePasswordLoading = true
      if (!this.newPassword || this.newPassword === ' ') {
        this.$message({
          type: 'error',
          message: '密码不能为空',
        })
        this.updatePasswordLoading = false
        return
      }
      this.$http
        .post('/axh/dtUsers/updatePassword', {
          id: this.id,
          password: this.newPassword,
        })
        .then((res) => {
          this.$message({
            type: 'success',
            message: res.msg,
          })
          this.updatePasswordLoading = false
          this.updateDialog = false
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.systemUser {
  padding: 20px;
}

.screenContent {
  display: flex;
  margin-bottom: 20px;

  .screenNav {
    flex: 1;
    width: 0;
    height: 120px;
    background-color: $colorFFFFFF;
    margin-right: 24px;
    border-radius: 4px;
    padding: 16px;

    .scrTop {
      display: flex;
      align-items: center;
      margin-bottom: 16px;

      .labItem {
        flex: 1;
        margin-right: 30px;
        max-width: 400px;
        display: flex;
        align-items: center;

        .label {
          margin-right: 6px;
        }

        .labScach {
          min-width: 200px;
        }

        .labSelect {
          flex: 1;
          width: 0;
        }

        &:nth-last-child(1) {
          margin-right: 0;
        }
      }

      .sel {
        max-width: 250px;
      }
    }

    .scrBot {
      display: flex;
      justify-content: space-between;

      .btnIcon {
        margin-left: 6px;
      }

      .left {
        display: flex;

        .btn {
          margin-left: 16px;
          width: 80px;
        }
      }
    }
  }

  .censusNav {
    background-color: $colorFFFFFF;
    width: 290px;
    height: 120px;
    border-radius: 4px;
    padding: 12px 20px;

    .censusTit {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 12px;

      .censusTip {
        font-size: 20px;
        color: $color35353F;
      }

      .loginRecord {
        font-size: 14px;
        line-height: 18px;
        color: $color2C83E4;
        border-bottom: 1px solid $color2C83E4;
        cursor: pointer;
      }
    }

    .censusCount {
      display: flex;
      justify-content: space-between;

      .censusItem {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: $color35353F;

        .num {
          margin-bottom: 6px;
          display: flex;

          img {
            width: 24px;
            height: 24px;
          }

          span {
            font-size: 20px;
          }
        }
      }
    }
  }
}

.tableCont {
  background-color: $bgColorFFFFFF;
  border-radius: 4px;
  overflow: hidden;

  .spanBtn {
    padding: 0 6px;
  }

  .hide {
    display: inline-block;
    width: 40px;
    height: 10px;
  }
}

.tabTips {
  text-align: center;
  font-size: 12px;
  padding-top: 16px;
  color: $color9E9E9E;
}

.labelBtn {
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;

  .btn {
    width: 70px;
    margin-right: 16px;
  }

  .default {
    color: #2c83e4;
    border: 1px solid #2c83e4;
  }
}

.fromLabel {
  .labelHead {
    display: flex;

    .sexHead {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-right: 20px;

      .sexImg {
        width: 80px;
        height: 80px;
        position: relative;
        cursor: pointer;
        border-radius: 50%;
        overflow: hidden;

        img {
          width: 80px;
          height: 80px;
        }
      }

      .addImg {
        position: relative;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80px;
        height: 80px;

        img {
          width: 70px;
          height: 70px;
          background-color: #eee;
          border-radius: 50%;
        }
      }

      p {
        margin-top: 5px;
      }

      .isActive {
        &::after {
          content: '';
          position: absolute;
          bottom: -6px;
          left: 50%;
          transform: translateX(-50%);
          background: url('../../assets/image/icon4.png') no-repeat;
          background-size: 100% 100%;
          width: 66px;
          height: 32px;
        }
      }
    }
  }
}
.loginQrcode {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>